<template>
  <div class="base">
    <!-- 登录和注册界面ALL -->
    <div class="loginAndRegister">
      <!-- 登录表单开始 -->
      <div
        class="loginArea"
        :style="{ position: loginPosition == 1 ? 'absolute' : 'static' }"
      >
        <!-- 登录标题开始 -->
        <transition
          name="animate__animated animate__bounce"
          enter-active-class="animate__fadeInUp"
          leave-active-class="animate__zoomOut"
          appear
        >
          <!-- 标语 -->
          <div v-show="koiLogin.isShow" class="loginTitle">LOGIN🍀</div>
        </transition>
        <!-- 登录标题结束 -->

        <!-- 用户名和密码框开始 -->
        <transition
          name="animate__animated animate__bounce"
          enter-active-class="animate__fadeInUp"
          leave-active-class="animate__zoomOut"
          appear
        >
          <!-- 用户名和密码框 -->
          <el-form
            :model="loginForm"
            ref="userFormRef"
            :rules="loginRules"
            v-show="koiLogin.isShow"
            status-icon
            class="userLoginForm"
          >
            <el-form-item prop="username" style="display: flex; flex: 1">
              <el-input
                v-model="loginForm.username"
                style="width: 200px"
                placeholder="用户名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password" style="display: flex; flex: 1">
              <el-input
                placeholder="密码"
                type="password"
                v-model="loginForm.password"
                style="width: 200px"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item prop="securityCode" style="display: flex; flex: 1">
              <!-- 输入过验证码之后就能够敲击回车登录 -->
              <el-input
                placeholder="验证码"
                v-model="loginForm.securityCode"
                style="width: 200px"
                @keydown.enter="userLogin"
              ></el-input>
            </el-form-item>
          </el-form>
        </transition>
        <transition
          name="animate__animated animate__bounce"
          enter-active-class="animate__fadeInUp"
          leave-active-class="animate__zoomOut"
          appear
        >
          <!-- 登录按钮 -->
          <div v-show="koiLogin.isShow" class="loginButton">
            <el-button
              type="success"
              round
              style="background: #257b5e"
              class="hoverButton"
              v-if="!loading"
              @click="userLogin"
              >登录🌻</el-button
            >
            <el-button
              type="success"
              v-if="loading"
              round
              style="background: #257b5e"
              class="hoverButton"
              :loading="loading"
              @click="userLogin"
              >登录中🌻</el-button
            >
          </div>
        </transition>
        <!-- 用户名和密码框结束 -->
      </div>
      <!-- 登录表单结束 -->

      <!-- 注册表单开始 -->
      <div class="registArea">
        <transition
          name="animate__animated animate__bounce"
          enter-active-class="animate__fadeInUp"
          leave-active-class="animate__zoomOut"
          appear
        >
          <!-- 注册表头 -->
          <div v-show="!koiLogin.isShow" class="registerTitle">会员注册🌻</div>
        </transition>
        <transition
          name="animate__animated animate__bounce"
          enter-active-class="animate__backInLeft"
          leave-active-class="animate__zoomOut"
          appear
        >
          <!-- 注册表单 -->
          <el-form
            :model="registerForm"
            ref="registerFormRef"
            :rules="registerRules"
            v-show="!koiLogin.isShow"
            status-icon
            class="registerForm"
          >
            <el-form-item prop="regUserName" style="display: flex; flex: 1">
              用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名:
              <el-input
                placeholder="请输入用户名"
                v-model="registerForm.regUserName"
                style="width: 165px; margin-left: 10px"
                clearable
              >
              </el-input>
            </el-form-item>

            <el-form-item prop="regPwd" style="padding-top: 6px">
              密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
              <el-input
                placeholder="请输入密码"
                style="width: 165px; margin-left: 10px"
                v-model="registerForm.regPwd"
                show-password
              ></el-input>
            </el-form-item>

            <el-form-item prop="regConfirmPwd" style="padding-top: 6px">
              确&nbsp;认&nbsp;密&nbsp;码:
              <el-input
                placeholder="请再次输入密码"
                style="width: 165px; margin-left: 10px"
                v-model="registerForm.regConfirmPwd"
                show-password
              ></el-input>
            </el-form-item>

            <el-form-item prop="adminOptions" style="padding-top: 6px">
              管理员审核:
              <el-select
                v-model="registerForm.regCode"
                filterable
                style="width: 165px; margin-left: 10px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in koiLogin.adminOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </transition>
        <transition
          name="animate__animated animate__bounce"
          enter-active-class="animate__fadeInUp"
          leave-active-class="animate__zoomOut"
          appear
        >
          <!-- 注册按钮-->
          <div v-show="!koiLogin.isShow" class="registerButton">
            <el-button
              type="success"
              round
              style="background-color: #257b5e"
              v-if="!loading"
              class="hoverButton"
              @click="userRegister"
              >注册🍀</el-button
            >
            <el-button
              type="success"
              round
              style="background-color: #257b5e"
              v-if="loading"
              :loading="loading"
              class="hoverButton"
              @click="userRegister"
              >注册中🍀</el-button
            >
          </div>
        </transition>
      </div>
      <!-- 注册表单结束 -->

      <!-- 信息展示界面 -->
      <div
        id="info"
        class="showInfo"
        v-if="!screenStore.loginHidden"
        :style="{
          'border-top-right-radius': koiLogin.styleObj.borderTopRightRadius,
          'border-bottom-right-radius':
            koiLogin.styleObj.borderBottomRightRadius,
          'border-top-left-radius': koiLogin.styleObj.borderTopLeftRadius,
          'border-bottom-left-radius': koiLogin.styleObj.borderBottomLeftRadius,
          right: koiLogin.styleObj.right,
        }"
        ref="showInfoView"
      >
        <transition
          name="animate__animated animate__bounce"
          enter-active-class="animate__fadeInUp"
          leave-active-class="animate__zoomOut"
          appear
        >
          <!-- 没有用户输入用户名或者找不到用户名的时候 -->
          <div
            v-show="koiLogin.isShow"
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
            "
          >
            <!-- 欢迎语 -->
            <div
              style="
                flex: 2;
                display: flex;
                align-items: center;
                font-size: 22px;
                color: #ffffff;
                font-weight: bold;
              "
            >
              欢迎登入-YU-ADMIN🌻
              <!-- 欢迎登入后台管理系统🌻-->
            </div>
            <!-- 欢迎图片 -->
            <div style="flex: 2">
              <el-button
                type="success"
                style="background-color: #257b5e; border: 1px solid #ffffff"
                round
                @click="changeToRegister"
                >还没有账户？点击注册🍀</el-button
              >
            </div>
          </div>
        </transition>

        <transition
          name="animate__animated animate__bounce"
          enter-active-class="animate__fadeInUp"
          leave-active-class="animate__zoomOut"
          appear
        >
          <!-- 用户注册的时候展示信息 -->
          <div
            v-show="!koiLogin.isShow"
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
            "
          >
            <!-- 欢迎语 -->
            <div
              style="
                flex: 2;
                display: flex;
                align-items: center;
                font-size: 22px;
                color: #ffffff;
                font-weight: bold;
              "
            >
              欢迎注册🌻
            </div>
            <!-- 欢迎图片 -->
            <div style="flex: 2">
              <el-button
                type="success"
                style="background-color: #257b5e; border: 1px solid #ffffff"
                round
                @click="changeToLogin"
                >已有账户？点击登录🍀</el-button
              >
            </div>
          </div>
        </transition>
      </div>
    </div>

    <div class="beianhao">
      <a href="https://beian.miit.gov.cn/" target="_blank"
        >网站备案号：豫ICP备2022022094号-1</a
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
// import 'animate.css';
import { useLoginScreen } from "@/composables/login/loginScreen.ts";
// 定义封装登录适配代码
const { loginPosition, registerBackground } = useLoginScreen();
import useScreenStore from "@/store/layout/screen.ts";
// 获取当前移动端适配仓库
const screenStore = useScreenStore();
// @ts-ignore
import { ref, reactive, onMounted } from "vue";
// @ts-ignore
import type { FormInstance, FormRules } from "element-plus";
// @ts-ignore
import { koiMsgError, koiNoticeSuccess } from "@/utils/koi.ts";
import { useRouter, useRoute } from "vue-router";
import { koiMsgWarning } from "@/utils/koi.ts";
import useUserStore from "@/store/user/index.ts";
// 用户小仓库
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const koiLogin = reactive({
  adminOptions: [
    {
      value: "1",
      label: "YU-ADMIN🌻",
    },
    {
      value: "2",
      label: "于金金🍀",
    },
    {
      value: "3",
      label: "张大仙🌸",
    },
    {
      value: "4",
      label: "蕾姆🌹",
    },
    {
      value: "5",
      label: "橙留香🌵",
    },
    {
      value: "6",
      label: "菠萝吹雪🌵",
    },
    {
      value: "7",
      label: "陆小果🌵",
    },
  ],
  styleObj: {
    borderTopRightRadius: "15px",
    borderBottomRightRadius: "15px",
    borderTopLeftRadius: "0px",
    borderBottomLeftRadius: "0px",
    right: "0px",
  },
  isShow: true,
});

/** 用户登录代码 */
const userFormRef = ref<FormInstance>();
const loading = ref(false);

interface ILoginUser {
  username: string;
  password: string | number;
  securityCode: string | number;
}

const loginForm = reactive<ILoginUser>({
  username: "koi",
  password: "123456",
  securityCode: "1234🌹",
});

const loginRules = reactive<FormRules<ILoginUser>>({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  securityCode: [
    { required: true, message: "验证码不能为空", trigger: "blur" },
  ],
});

// 登录后载入路由
// import useRoutesStore from "@/store/layout/routes.ts";

const userLogin = () => {
  if (loginForm.username != "koi") {
    koiMsgWarning("用户名必须koi！");
    return false;
  }

  if (!userFormRef.value) return;
  (userFormRef.value as any).validate(async (valid: any, fields: any) => {
    const username = loginForm.username;
    const password = loginForm.password;
    const securityCode = loginForm.securityCode;
    if (valid) {
      loading.value = true;
      try {
        const res: any = await userStore.koiLogin({
          username,
          password,
          securityCode,
        });
        if (res === "ok") {
          // 获取路由仓库
          // const routeStore = useRoutesStore();
          // 调用路由菜单数据
          // try {
          //   await routeStore.generateMenuRoutes();
          // } catch (error) {
          //   console.log(error);
          // }

          // koiNoticeSuccess("登录成功🌻");
          // loading.value = false;
          // router.push("/home");
          // 等待1秒关闭loading
          let loadingTime = 1;
          setInterval(() => {
            loadingTime--;
            if (loadingTime === 0) {
              koiNoticeSuccess("登录成功🌻");
              // Token过期，跳转到上次记录的页面
              const redirectPath = route.query.redirect as string | undefined;
              loading.value = false;
              router.push(redirectPath || "/home");
            }
          }, 1000);
        }
      } catch (error) {
        // 等待1秒关闭loading
        let loadingTime = 1;
        setInterval(() => {
          loadingTime--;
          if (loadingTime === 0) {
            loading.value = false;
          }
        }, 1000);
      }
    } else {
      koiNoticeSuccess("校验失败，信息填写有误🌻");
      console.log("登录校验失败", fields);
    }
  });

  /* 静态资源版本进入   
  // 等待1秒进入
  let loadingTime = 1;
  setInterval(() => {
    loadingTime--;
    if (loadingTime === 0) {
      loading.value = false;
      if (!userFormRef.value) return;
      (userFormRef.value as any).validate((valid: any, fields: any) => {
        console.log("login-valid", valid);
        if (valid) {
          console.log("登录submit!", valid);
          koiNoticeSuccess("登录成功🌻");
          router.push("/home");
        } else {
          console.log("error submit!", fields);
        }
      });
    }
  }, 1000);
  */
};

// 进入页面加载管理员信息
onMounted(() => {
  listAdminInfo();
});
// 加载管理员信息
const listAdminInfo = () => {
  console.log("加载管理员信息");
  // koi.get("/listAdminInfo").then(res=>{
  //     if(res.code=="200"){
  //         adminOptions = res.data
  //     }
  // })
};

const registerFormRef = ref<FormInstance>();
interface IRegisterForm {
  regUserName: any;
  regPwd: string | number;
  regConfirmPwd: string | number;
  regCode: string;
}

/** 注册代码 */
const registerForm = reactive<IRegisterForm>({
  regUserName: "YU-ADMIN🌻",
  regPwd: "123456",
  regConfirmPwd: "1234567",
  regCode: "1",
});
const registerRules = {
  regUserName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  regPwd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  regConfirmPwd: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
  ],
  regCode: [{ required: true, message: "审核员不能为空", trigger: "blur" }],
};

// 用户注册
const userRegister = () => {
  if (registerForm.regPwd != registerForm.regConfirmPwd) {
    koiMsgError("两次密码输入不同，请检查后重新注册！");
    return false;
  }
  loading.value = true;
  // 等待1秒进入
  let loadingTime = 1;
  setInterval(() => {
    loadingTime--;
    if (loadingTime === 0) {
      loading.value = false;
      if (!registerFormRef.value) return;
      (registerFormRef.value as any).validate((valid: any, fields: any) => {
        if (valid) {
          console.log("注册submit!", valid);
          koiNoticeSuccess("注册成功，请前去登录🌻");
          router.push("/login");
        } else {
          console.log("error submit!", fields);
        }
      });
    }
  }, 1000);
  // koi.post("/user/register", user).then(res => {
  //   if (res.code === "200") {
  //     koiMsgSuccess("申请成功，请耐心等待管理员审核！")
  //     regUser = {
  //       regUsername: '',
  //       regRePwd: '',
  //       regPwd: '',
  //       regCode: ""
  //     }
  //     changeToLogin()
  //   }
  //   if (res.code === "400") {
  //     alert(res.msg)
  //     return
  //   }
  // })
};

// 去注册
const changeToRegister = () => {
  koiLogin.styleObj.borderTopRightRadius = "0px";
  koiLogin.styleObj.borderBottomRightRadius = "0px";
  koiLogin.styleObj.borderTopLeftRadius = "15px";
  koiLogin.styleObj.borderBottomLeftRadius = "15px";
  koiLogin.styleObj.right = "50%";
  koiLogin.isShow = !koiLogin.isShow;
};

// 去登录
const changeToLogin = () => {
  koiLogin.styleObj.borderTopRightRadius = "15px";
  koiLogin.styleObj.borderTopLeftRadius = "0px";
  koiLogin.styleObj.borderBottomRightRadius = "15px";
  koiLogin.styleObj.borderBottomLeftRadius = "0px";
  koiLogin.styleObj.right = "0px";
  koiLogin.isShow = !koiLogin.isShow;
};
</script>

<style lang="scss" scoped>
.beianhao {
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  bottom: 10px;
}
.base {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  // 图片缩放自适应
  background: url("@/assets/images/login/background.png") center center
    no-repeat;
  background-size: 100% 100%;
  position: fixed;
  overflow: hidden;
}
.loginAndRegister {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.loginArea {
  background-color: rgba(255, 255, 255, 0.8);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  height: 400px;
  width: 350px;
  min-width: 350px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.registArea {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
  width: 350px;
  background: v-bind(registerBackground);
  // background: rgba(255, 255, 255, 0.8);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.showInfo {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  position: absolute;
  height: 400px;
  width: 350px;
  z-index: 2;
  top: 0;
  right: 0;
  // background: #409EFF;
  background-image: url("@/assets/images/login/welcome.png");
  background-size: 90%;
}

.showInfo:hover {
  background-size: 100%;
  background-position: -50px -50px;
}

.loginTitle {
  width: 70%;
  flex: 1; // 登录标题高度占比1份
  border-bottom: 1px solid #257b5e;
  display: flex;
  align-items: center;
  color: #257b5e;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
}

#info {
  transition: 0.5s linear;
}

.userLoginForm {
  width: 100%;
  display: flex;
  flex: 2; // 登录表单高度占比2份
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

.userLoginForm input {
  outline: none;
  height: 30px;
  border-radius: 13px;
  padding-left: 10px;
  font-size: 12px;
}

.loginButton {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

// 按钮悬浮颜色
.hoverButton {
  &:hover {
    color: #34c565;
  }
}

.registerTitle {
  width: 70%;
  flex: 1; // 注册高度占比1份
  color: #257b5e;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #257b5e;
}

.registerForm {
  flex: 2; // 注册表单占比1份
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #257b5e;
  font-size: 16px;
  padding-top: 10px;
  z-index: 1;
}

.registerForm input {
  outline: none;
  height: 30px;
  border-radius: 13px;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid gray;
}

.registerForm input:focus {
  border: 2px solid #257b5e;
}

.registerButton {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 修改输入框字体
// :deep(.el-input__inner) {
//   color:#646569;
// }
</style>
